<template>
  <el-dialog title="提示" :visible.sync="ClassifyState.addDialog" width="500px" top="19vh" @close="cancel">
    <el-form :model="ClassifyState.addClassifyForm" label-width="80px">
      <el-form-item label="添加分类">
        <el-radio-group v-model="ClassifyState.classifyRadio" @change="classifyRadioChage">
          <el-radio :label="1">添加一级分类</el-radio>
          <el-radio :label="2">添加二级分类</el-radio>
          <el-radio :label="3">添加三级分类</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="一级分类">
        <el-input v-model="ClassifyState.addClassifyForm.classifyOneVal" placeholder="请输入一级分类名称" v-if="ClassifyState.classifyRadio==1"></el-input>
        <el-select v-model="ClassifyState.addClassifyForm.classifyOneSelect" placeholder="请选择一级分类" v-if="ClassifyState.classifyRadio!=1" @change="staticSeachQuery">
          <el-option v-for="(item,key) in ClassifyState.classifyOneOption" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" v-if="ClassifyState.classifyRadio==2 || ClassifyState.classifyRadio==3">
        <el-input v-model="ClassifyState.addClassifyForm.classifyTwoVal" placeholder="请输入二级分类名称" v-if="ClassifyState.classifyRadio==2"></el-input>
        <el-select v-model="ClassifyState.addClassifyForm.classifyTwoSelect" placeholder="请选择二级分类" v-if="ClassifyState.classifyRadio==3">
          <el-option v-for="(item,key) in ClassifyState.classifyTwoOption" :key="key" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" v-if="ClassifyState.classifyRadio==3">
        <el-input v-model="ClassifyState.addClassifyForm.classifyThreeVal" placeholder="请输入三级分类名称"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="ClassifyState.addDialog = false">取 消</el-button>
      <el-button type="primary" @click="staticSave(true)">保 存</el-button>
      <el-button type="primary" @click="staticSave(false)">保存并继续</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  //import引入的组件
  components: {},
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {

    };
  },
  computed: {
    ...mapState('Classify', { //使用如下 {{ state.name }}  console.log(this.state.name)
      ClassifyState: state => state
    }),
  },
  methods: {
    ...mapActions('Classify', [
      'save', 'seachQuery'
    ]),
    /**选择分类还原初始值 */
    classifyRadioChage () {
      this.ClassifyState.addClassifyForm = { ...this.ClassifyState.addClassifyFormCopy }
    },
    /**取消 */
    cancel () {
      this.classifyRadioChage();
      this.ClassifyState.addDialog = false;
    },
    /**保存分类 */
    staticSave (state) {
      this["save"](state)
    },
    /**查询分类 */
    staticSeachQuery () {
      this["seachQuery"]('参数')
    }
  },
  mounted () {
  },
};
</script>

<style></style>